<template>
    <div class="box">
        <h3>Child3 组件 - 命名空间</h3>
        <div>state</div>
        <div>普通用法: {{ $store.state.child3.count }}</div>
        <div>辅助函数: {{ count }}</div>
        <div>getters</div>
        <div>普通用法: {{ $store.getters['child3/newCount'] }}</div>
        <div>辅助函数: {{ newCount }}</div>
        <button @click="changeCountHandler">修改count值</button>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
export default {
    name: "Child3",
    computed: {
        ...mapState({
            count: state => state.child3.count
        }),
        ...mapGetters('child3', ['newCount'])
    },
    mounted() {
        console.log(this.$store.getters)
    },
    methods: {
        ...mapActions('child3', ['changeCount']),
        ...mapMutations('child3', ['SET_COUNT']),
        changeCountHandler() {
            // actions
            // 普通用法
            // this.$store.dispatch('child3/changeCount', 7)
            // 辅助函数
            // this.changeCount(9)

            // mutations
            // 普通用法
            // this.$store.commit('child3/SET_COUNT', 666);
            // 辅助函数
            this.SET_COUNT(888)
        }
    }
};
</script>

<style scoped>
</style>
